<template>
	<view class="pl-30 pr-30">
		<view class="flex flex-column align-center bg-white border-radius-10 padding-30">
			<text class="fsize-30">{{orderdes.ordertype===2?'取餐号':'桌号'}}</text>
			<text class="fsize-60 fweigh-600 mt-30">{{orderdes.ordertype===2?orderdes.orderNo: orderdes.deskName}}</text>
			<!-- <view class="mt-30 w-100">
				<u-steps :current="stepActive" activeColor="#F3C45D">
					<u-steps-item v-for="(ste, ix) in stepList" :key="ix" :title="ste.title"></u-steps-item>
				</u-steps>
			</view> -->
		</view>
		<!-- 产品列表 begin-->
		<view class="bg-white border-radius-10 mt-30 padding-30">
			<view class="flex flex-column">
				<text class="fszie-28 fweigh-600">{{orderdes.storeName}}</text>
				<text class="fsize-24 line-gray mt-12">{{orderdes.address}}</text>
			</view>
			<view class="mt-30 pt-30 border-t">
				<view class="flex mb-30" v-for="(item, index) in orderdes.foodData" :key="item">
					<image class="width-88 height-88 shrink0" :src="item.foodImage"></image>
					<view class="ml-10 w-100">
						<view class="fweigh-500 fsize-28">{{item.foodName}}</view>
						<view class="fsize-24 line-gray mt-5">{{item.specName}} {{item.feedTasteNames}}</view>
					</view>
					<view class="ml-10 shrink0 flex flex-column justify-between align-end">
						<view>
							<text class="fsize-20">￥</text>
							<text class="fsize-28">{{item.realPrice}}</text>
						</view>
						<view class="line-gray fsize-26">x{{item.quantity}}</view>
					</view>
				</view>
				<view class="border-t pt-30 text-align-right">
					<text class="fsize-26">共{{total}}件商品，合计</text>
					<text class="ml-10 fsize-30 fweigh-600">￥</text>
					<text class="fsize-40 fweigh-600">{{orderdes.sumAllAmount}}</text>
				</view>
			</view>
		</view>
		<!-- 产品列表 end -->
		<!-- 其他信息 begin-->
		<view class="bg-white border-radius-10 mt-30 pt-20 pb-20 pl-30 pr-30">
			<view class="flex justify-between align-center fsize-26 pt-20 pb-20">
				<text class="line-gray">支付状态</text>
				<text>{{orderdes.stateName}}</text>
			</view>
			<view class="flex justify-between align-center fsize-26 pt-20 pb-20">
				<text class="line-gray">订单编号</text>
				<text>{{orderdes.orderNo}}</text>
			</view>
			<view class="flex justify-between align-center fsize-26 pt-20 pb-20">
				<text class="line-gray">下单时间</text>
				<text>{{orderdes.orderDate}}</text>
			</view>
			<view class="flex justify-between align-center fsize-26 pt-20 pb-20">
				<text class="line-gray">订单类型</text>
				<text>{{orderdes.ordertype===2?'外带订单':'堂食订单'}}</text>
			</view>
		</view>
		<view class="mt-50">
			<u-button plain v-if="orderdes.status === 0" color="#F3C35C" text="立即支付" @click="onPayment(orderdes.orderId)"></u-button>
		</view>
		<!-- 其他信息 end -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { requestPayment } from '@/utils/payment'
	import { pay } from "@/common/util.js"
	export default {
		data() {
			return {
				orderdes: {},
				stepActive: 0,
				total: 0,
				stepList: [
					{title: '已下单'},
					{title: '配餐中'},
					{title: '已完成'}
				]
			}
		},
		computed: {},
		onLoad(options) {
			// this.orderdes = JSON.parse(decodeURIComponent(options.orderdes))
			this.getData(options.orderId)
		},
		methods: {
			getData(orid){
				let _that = this
				_that.$api.GetOrderDetail({orderId: orid}).then(res=>{
					_that.orderdes = res.data
					_that.total = _that.sum(_that.orderdes.foodData)
				})
			},
			sum(list){
				if(list && list.length > 0){
					let sum = 0
					list.filter(im=>{
						sum += Number(im.quantity)
					})
					return sum
				} else {
					return 0
				}
			},
			onPayment(orderId){
				pay(orderId)
				// this.$api.OrderPay({ids: orderId, payment_code: 'wechatpay', payment_type:17, params:{}}).then(respay=>{
				// 	const params = respay.data.respData
				// 	requestPayment(params).then(res=>{
				// 		this.$refs.uToast.show({
				// 			message: res,
				// 			complete() {
				// 				// this.getData(orderId)
				// 			}
				// 		})
				// 	}).catch(err=>{
				// 		this.$refs.uToast.show({
				// 			message: err
				// 		})
				// 	})
				// })
			}
		}
	}
</script>
